<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>그림 넣기</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="dialog.css" />
<script type="text/javascript" language="javascript">
//<![CDATA[
function insertImageList(filename, filepath)
{
  var oSel = document.getElementById('fm_insert_image');
  var opt = new Option(filename, filepath, true);
  oSel.options[oSel.length] = opt;
}

function popupClose()
{
    parent.window.popupClose();
}

function doSubmit ()
{
  parent.window.insertImage();
}

function chkImgFormat (el)
{
    var file = el.value;
    var allowSubmit = false;
    var extArray = new Array(".gif", ".jpg", ".png");

    extArray.join(" ");

    if (!file) return false;

    while (file.indexOf("\\") != -1)
        file = file.slice(file.indexOf("\\") + 1);

    var ext = file.slice(file.lastIndexOf(".")).toLowerCase();

    for (var i = 0; i < extArray.length; i++) {
        if (extArray[i] == ext) {
            allowSubmit = true;
            break;
        }
    }

    if (allowSubmit) {
        document.getElementById("submit_btn").disabled = false;
        document.insertImage.submit();
    }
    else {
        document.getElementById("submit_btn").disabled = true;
        alert("그림 삽입은 GIF, JPG, PNG 파일만 가능합니다. 다시 선택하여 주십시요.");
        return false;
    }
}

function attachSuccess (filepath) {
  var file = filepath;

    while (file.indexOf("/") != -1)
    file = file.slice(file.indexOf("/") + 1);

  insertImageList(file, filepath);
  document.insertImage.attachImage.value = filepath;
  imgComplete();
}

function selectedPreview () {
  var el = document.getElementById("fm_insert_image");
  if (el.length < 1) return false;
  for (i=0; i<el.length; i++) {
    if (el.options[i].selected == true) {
      document.insertImage.attachImage.value = el.options[i].value;
      document.getElementById('delete_btn').disabled = false;
      break;
    }
  }
  imgComplete();
  return false;
}

function imgComplete ()
{
    var img = document.createElement("img");
    img.src = document.insertImage.attachImage.value;

    var w = 160;
    var h = 120;
    var resizeW;
    var resizeH;

    if (img.complete) {
        if (img.width > w || img.height > h) {
            if (img.width > img.height) {
                resizeW = img.width > w ? w : img.width;
                resizeH = Math.round((img.height * resizeW) / img.width);
            }
            else {
                resizeH = img.height > h ? h : img.height;
                resizeW = Math.round((img.width * resizeH) / img.height);
            }
        }
        else {
            resizeW = img.width;
            resizeH = img.height;
        }

        img.style.width = resizeW + 'px';
        img.style.height = resizeH + 'px';
        img.style.marginTop = (h - resizeH) / 2 + 'px';

        var el = document.getElementById("preview");
        el.innerHTML = '';
        el.appendChild(img);
    }
    else {
        setTimeout("imgComplete()", 100);
    }
}

function deleteImage () {
  var el = document.getElementById("fm_insert_image");
  var img = new Array;

  for (i=0; i<el.length; i++) {
    if (el.options[i].selected == true) {
      img.push(el.options[i].text);
    }
  }
  snd_req(img.join(' '));
}

function deleteList () {
  var el = document.getElementById("fm_insert_image");
  var img = new Array;

  for (i=0; i<el.length; i++) {
    if (el.options[i].selected == true) {
      img.push(el.options[i].text);
    }
  }

  for (i=0; i<el.length; i++) {
    for (j=0; j<img.length; j++) {
      if (el.options[i].text == img[j]) {
        el.options[i] = null;
      }
    }
  }

  document.getElementById('delete_btn').disabled = true;
  document.getElementById("preview").innerHTML = '';
  document.insertImage.attachImage.value = '';
}

function create_request_object(params) {
  var http_request = false;

    if (window.XMLHttpRequest) {
      http_request = new XMLHttpRequest();
      if (http_request.overrideMimeType) {
          http_request.overrideMimeType('text/xml');
      }
    }
    else if (window.ActiveXObject) {
      try {
          http_request = new ActiveXObject("Msxml2.XMLHTTP");
      }
      catch (e) {
          try {
            http_request = new ActiveXObject("Microsoft.XMLHTTP");
          }
          catch (e) {}
      }
    }

    if (!http_request) {
      return false;
    }

    http_request.onreadystatechange = function() { handle_response(http_request); };
    http_request.open("GET", params, true);
    http_request.send(null);
}

function snd_req(img) {
    create_request_object("insert_image.php?do=delete&img="+img);
}

function handle_response (http_request) {
    if(http_request.readyState == 4){
      if (http_request.status == 200) {
      deleteList();
      }
    }
}
//]]>
</script>
</head>
<body>
<div align="center">
<div style="border:1px #ccc solid;background-color:#fff;margin-bottom:10px;width:200px;height:120px;text-align:center" id="preview">
</div>
</div>
<fieldset><legend><span class="normal">그림 파일 선택</span></legend>
    <div style="padding:5px 0px 2px 5px">
        <span class="normal">그림 파일:</span>
    </div>
    <div style="padding-left:5px">
    <form action="insert_image.php" name="insertImage" method="post" enctype="multipart/form-data" target="do_action">
    <input type="hidden" name="do" value="submit" />
    <input type="hidden" name="attachImage" />
      <input type="file" size="30" name="AttachFile" onChange="chkImgFormat(this)" />
    </form>
    </div>
    <div style="padding:5px;float:left;width:240px">
    <select id="fm_insert_image" name="insert_image" size="4" multiple style="width:100%" onClick="selectedPreview()">
    </select>
    </div>
  <div style="float:right;padding-top:5px">
    <button id="delete_btn" class="button" onclick="deleteImage()" disabled="true">삭제</button>
  </div>
</fieldset>
<div style="margin:10px 0px 10px 0px">
    <div style="float:left;width:100%">
        <fieldset><legend><span class="normal">레이아웃</span></legend>
        <div style="padding:5px 0px 5px 5px; text-align:center">
        <form id="fm_align">
        <input type="radio" name="alignment" value="top" checked="checked" /><img src="icons/image_align_top.gif" align="middle" />
        <input type="radio" name="alignment" value="left" /><img src="icons/image_align_left.gif" align="middle" />
        <input type="radio" name="alignment" value="right" /><img src="icons/image_align_right.gif" align="middle" />
        <input type="radio" name="alignment" value="middle" /><img src="icons/image_align_middle.gif" align="middle" />
        <input type="radio" name="alignment" value="bottom" /><img src="icons/image_align_bottom.gif" align="middle" />
        <input type="radio" name="alignment" value="break" /><img src="icons/image_align_breakline.gif" align="middle" />
        </form>
        </div>
        </fieldset>
    </div>
    <div style="clear:both"></div>
</div>
<div style="text-align:center;margin-top:10px">
    <button onclick="doSubmit()" id="submit_btn" class="button" disabled="true">확인</button>&#160;
    <button onclick="popupClose()" class="button">취소</button>
</div>
</body>
</html>
